I wanted to created a highlight effect over a grid. Originally I wanted to highlight to be diagonal, but it was getting to be difficult. The hardest part about this was figuring out which circle in the grid needed to be which color. I ended up with two identical, nested for-loops: one for the background, and second for finding where the mouse was. I also had to call the setup function inside of draw, which I’m almost sure is a not a good idea. That’s probably why this page is super sloooow.

//global variables
int ballWidth = 10;


void setup() {
  size (600, 600); 
  smooth();
 background(0);

  for (int i=0; i * ballWidth < width; i++) {    
    for (int a=0; a * ballWidth < height; a++) {
      int ballX = ballWidth*i + ballWidth/2;
      int ballY = ballWidth*a + ballWidth/2;

      fill(ballX, 0, ballY);
      ellipse(ballX, ballY, ballWidth, ballWidth);
    }
  }
}


void draw() {
  setup();

  for (int i=0; i * ballWidth < width; i++) {    
    for (int a=0; a * ballWidth < height; a++) {
      int ballX = ballWidth*i + ballWidth/2;
      int ballY = ballWidth*a + ballWidth/2;

      if (((mouseX >= ballWidth*i) && (mouseX <= ballWidth*i+ballWidth))
        && ((mouseY >= ballWidth*a) && (mouseY <= ballWidth*a+ballWidth))) {
  
        for (int d=0; d*ballWidth <= width; d++) {
          fill(255, 255, 255, 100);
          ellipse(ballX, ballY+ d*ballWidth, ballWidth, ballWidth);
          fill(255, 255, 255, 70);
          ellipse(ballX + ballWidth, ballY+ d*ballWidth, ballWidth, ballWidth);
          ellipse(ballX - ballWidth, ballY+ d*ballWidth, ballWidth, ballWidth);
          fill(255, 255, 255, 40);
          ellipse(ballX + 2*ballWidth, ballY+ d*ballWidth, ballWidth, ballWidth);
          ellipse(ballX - 2*ballWidth, ballY+ d*ballWidth, ballWidth, ballWidth);  
      }
         for (int d=0; d*ballWidth <= width; d++) {
          fill(255, 255, 255, 100);
          ellipse(ballX, ballY- d*ballWidth, ballWidth, ballWidth);
          fill(255, 255, 255, 70);
          ellipse(ballX + ballWidth, ballY- d*ballWidth, ballWidth, ballWidth);
          ellipse(ballX - ballWidth, ballY- d*ballWidth, ballWidth, ballWidth);
          fill(255, 255, 255, 40);
          ellipse(ballX + 2*ballWidth, ballY- d*ballWidth, ballWidth, ballWidth);
          ellipse(ballX - 2*ballWidth, ballY- d*ballWidth, ballWidth, ballWidth);
        }
      }
    }
  }
}